<template>
  <el-scrollbar>
    <el-form :model="form" class="form" label-width="110px" label-position="right">
      <el-form-item label=" 昵称">
        <el-input v-model="form.nickname" :disabled="type === 2" placeholder="请填写 昵称" class="inputWidth" />
      </el-form-item>
      <el-form-item v-if="type === 0" label=" 密码">
        <el-input v-model="form.password" :disabled="type === 2" placeholder="请填写 密码" class="inputWidth" />
      </el-form-item>
      <el-form-item label=" 头像地址">
        <el-upload
          class="avatar-uploader"
          action="avatarUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :disabled="type === 2"
        >
          <img v-if="form.avatar" :src="form.avatar" class="avatar" alt="用户头像">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item label="性别">
        <el-select
          v-model="form.gender"
          class="inputWidth"
          :disabled="type === 2"
          clearable
        >
          <el-option label="女" :value="0" />
          <el-option label="男" :value="1" />
          <el-option label="保密" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label=" 联系方式">
        <el-input
          v-model="form.phone"
          class="inputWidth"
          :disabled="type === 2"
          placeholder="请填写 联系方式"
          maxlength="11"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label=" 个人简介">
        <el-input
          v-model="form.userInfo"
          :disabled="type === 2"
          class="inputWidth"
          type="textarea"
          placeholder="这个人很懒，什么都没有留下"
          autosize
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label=" 工作状态">
        <el-select
          v-model="form.workStatus"
          :disabled="type === 2"
          class="inputWidth"
          clearable
        >
          <el-option label="保密" :value="0" />
          <el-option label="工作中" :value="1" />
          <el-option label="求职中" :value="2" />
          <el-option label="在校生" :value="3" />
          <el-option label="摆烂" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label=" 邮件地址">
        <el-input v-model="form.email" :disabled="type === 2" placeholder="请填写 邮件地址" class="inputWidth" />
      </el-form-item>
      <el-form-item v-if="type !== 2" label=" 验证码">
        <el-input v-model="form.verifyCode" :disabled="type === 2" placeholder="请填写验证码" class="inputWidth">
          <el-button
            slot="append"
            :disabled="verifyDisabled"
            type="primary"
            @click="getVerifyCode"
          >
            {{ verifyBtnText }}
          </el-button>
        </el-input>
      </el-form-item>
      <el-row>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="editUser">{{ loadingText }}</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="cancel">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>
<script>
import sysUser from '@/api/sysUser'
import { qiniu } from '@/api/upload'
export default {
  data() {
    return {
      form: {
        id: ''
      },
      loadingText: '保存',
      verifyBtnText: '获取验证码',
      verifyDisabled: false,
      timer: 30,
      type: 1
    }
  },
  created() {
    const id = this.$route.query.id || 1
    this.type = this.$route.query.type
    if (id) {
      this.form.id = id
      this.loadingText = '编辑'
      this.getDetailById(this.form.id)
    } else {
      this.loadingText = '保存'
    }
  },
  methods: {
    getDetailById(id) {
      sysUser.getById(id).then(res => {
        this.form = res.data
      })
    },
    edit() {
      sysUser.edit(this.form).then(res => {
        this.$message.success(res.message)
        this.$router.push('/sysUser/index')
      })
    },
    getVerifyCode() {
      const timeout = setInterval(() => {
        if (this.timer < 1) {
          this.verifyDisabled = false
          this.verifyBtnText = '获取验证码'
          this.timer = 30
          clearInterval(timeout)
        } else {
          this.verifyDisabled = true
          this.verifyBtnText = this.timer-- + 's后重发'
        }
      }, 1000)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10
      let type = file.type
      type = type.substr(Number(type.lastIndexOf('/')) + 1)
      console.log(file)
      console.log(type)
      const isImageType = this.isImageType(type)
      if (!isImageType) {
        this.$message.error(`只能上传图片格式 ${this.imgArr}`)
      }
      if (!isLt10M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      if (file) {
        // 前端16位MD5无法满足要求，采用服务器上传方式进行
        qiniu(file).then(resp => {
          this.form.avatar = resp.data.fileUrl
        })
      } else {
        this.$message.error('文件上传失败')
        return false
      }
      return isImageType && isLt10M
    },
    isImageType(str) {
      // toLowerCase() 将字符串转换为小写，返回一个新的字符串
      return this.imgArr.indexOf(str.toLowerCase()) !== -1
    },
    cancel() {
      this.$router.push('/sysUser/index')
    },
    editUser() {
      sysUser.edit({ ...this.form }).then(resp => {
        this.$message.info(resp.message)
        this.$parent.closePop()
        this.popData.upData()
      })
    }
  }
}
</script>
<style>
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .form {
    width: 50%;
    margin: 20px auto auto;
  }
  .inputWidth{
    width: 420px;
  }
</style>
